<template>
  <div class="p-6 space-y-6">
    <div class="text-center">
      <h2 class="text-xl font-bold text-gray-900 mb-2">认证测试</h2>
      <p class="text-gray-600">测试用户认证功能</p>
    </div>

    <div class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
        <input
          v-model="testData.username"
          type="text"
          class="w-full px-3 py-2 border border-gray-300 rounded-lg"
          placeholder="测试用户名"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
        <input
          v-model="testData.password"
          type="password"
          class="w-full px-3 py-2 border border-gray-300 rounded-lg"
          placeholder="测试密码"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
        <input
          v-model="testData.confirmPassword"
          type="password"
          class="w-full px-3 py-2 border border-gray-300 rounded-lg"
          placeholder="确认密码"
        />
      </div>

      <div class="space-y-2">
        <button
          @click="testRegister"
          :disabled="isLoading"
          class="w-full btn-secondary disabled:opacity-50"
        >
          测试注册
        </button>

        <button
          @click="testLogin"
          :disabled="isLoading"
          class="w-full btn-secondary disabled:opacity-50"
        >
          测试登录
        </button>

        <button
          @click="testValidateToken"
          :disabled="isLoading"
          class="w-full btn-secondary disabled:opacity-50"
        >
          测试Token验证
        </button>
      </div>
    </div>

    <div v-if="testResult" class="bg-gray-50 p-4 rounded-lg">
      <h3 class="text-sm font-medium text-gray-700 mb-2">测试结果</h3>
      <pre class="text-xs text-gray-600 whitespace-pre-wrap">{{ testResult }}</pre>
    </div>

    <div class="text-xs text-gray-500">
      <p>当前API地址: {{ config.api.baseUrl }}</p>
      <p>当前用户: {{ store.user?.username || '未登录' }}</p>
      <p>Token状态: {{ store.token ? '已设置' : '未设置' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useAppStore } from '@/store';
import { authAPI } from '@/services/api';
import { config } from '@/utils/config';

const store = useAppStore();
const isLoading = ref(false);
const testResult = ref('');

const testData = reactive({
  username: 'testuser',
  password: '123456',
  confirmPassword: '123456'
});

const runTest = async (name: string, testFn: () => Promise<any>) => {
  isLoading.value = true;
  testResult.value = '';
  
  try {
    const result = await testFn();
    testResult.value = `✅ ${name} 成功\n${JSON.stringify(result, null, 2)}`;
  } catch (error: any) {
    testResult.value = `❌ ${name} 失败\n${error.message || error.response?.data?.message || error}`;
  } finally {
    isLoading.value = false;
  }
};

const testRegister = () => runTest('注册', async () => {
  if (testData.password !== testData.confirmPassword) {
    throw new Error('密码不一致');
  }
  return await authAPI.register(testData.username, testData.password);
});

const testLogin = () => runTest('登录', async () => {
  return await authAPI.login(testData.username, testData.password);
});

const testValidateToken = () => runTest('Token验证', async () => {
  if (!store.token) {
    throw new Error('没有Token');
  }
  return await authAPI.validateToken();
});
</script> 